$(function () {

  $('.video-content .btn').on("click", function () {
    $('.video').each(function () { this.pause(); });
    $('.btn').each(function () {
      $(this).css({ "display": "block" });
      console.log(this, "this");
    });
    $(this).css({ "display": "none" });
    var video1 = $(this).parent().find('video')[0];
    video1.play();
    video1.controls = true
  })


  var galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // thumbs: {
    //   swiper: galleryThumbs
    // }
  });


  $('.swiper-list .list-box').on("click", function () {
    let index = $(this).index();
    galleryTop.slideTo(index, 500, true);
  })

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
      if (decodeURIComponent(pair[0]) === variable) {
        return decodeURIComponent(pair[1]);
      }
    }
    return undefined;
  }
  let swiperId = getQueryVariable('swiperId');
  if (swiperId) {
    galleryTop.slideTo(swiperId, 0, false);
    let img = $('.swiper-wrapper .swiper-slide').eq(swiperId).find('.btn')
    img.css({ "display": "none" });
    let video = $('.swiper-wrapper .swiper-slide').eq(swiperId).find('video')[0]
    video.play();
    video.controls = true
  }
});